<template>
	<view>

		<view class="input-wrapper">
			<input id="uni-input-type-text" v-model="keyword" @confirm="onSearch" class="uni-input" type="text"
				placeholder="输入关键字查找电影" />
		</view>


		<view v-if="list.name" class="">

			<view class="top">
				<!-- <image class="leftimg" :src="baseurl+list.cover" mode="" /> -->
				<image class="leftimg" :src="list.cover" mode="" />
			</view>


			<view class="middle">
				<view><text class="dym">{{list.name}}</text> </view>
				<view class="sysj" v-if="this.keyword">上映时间:{{list.playDate}} </view>
			</view>

			<view class="synopsis" v-html="list.introduction"></view>


			<view class="bottom">
				<view v-if="this.keyword" >
					<!-- <video id="myVideo" :src="baseurl+list.video" controls></video> -->
				<video id="myVideo" :src="list.video"  controls></video>
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import {previewlist} from "../../../api/movieService.js";
	import{baseurl} from '../../../api/request.js';
	import {moviesearchlist} from "../../../mock/movie.js";
	
	export default {
		data() {
			return {
				baseurl,
				keyword: "",
				list: {},
				test: {},
				src:"",
				test1:[]
			}
		},

		// async onLoad() {
		// 	let res = await previewlist()
		// 	console.log(res);
		// },

		methods: {
			async onSearch(keyword) {
				console.log(keyword);
				let res = await previewlist({
					keyword,
				});
				console.log(res);
				if(res.code == 200){
					res.rows.forEach((item,index) => {
						console.log(item);
						if (keyword.detail.value == item.name) {
							this.list = item
						}
						console.log("this.list:",this.list);
					})
				} else {
					moviesearchlist().rows.forEach((item,index) => {
						console.log("item:11",item);
						if (keyword.detail.value == item.name) {
							this.list = item
						}
						console.log("this.list:",this.list);
					})
				}
				
			},
			
		}
	}
</script>

<style>
	.input-wrapper {
		margin-top: 30px;
		display: flex;
	}

	.uni-input {
		height: 50rpx;
		padding: 8rpx;
		border: 1px solid black;
		width: 90%;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}
	
	
	.top{
		width:100%;
		height:450rpx;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	.top img{
		width: 100%;
		height: 100%;
	}
	
	
	.middle{
	  margin-top: 50px;
	  margin-left: 10px;
	}
	.dym{
	  margin-top: 3px;
	  color: #797D82;
	  margin-left: 10px;
	}
	.sysj{
	  margin-top: 3px;
	  color: #797D82;
	  margin-left: 10px;
	}
	
	.synopsis{
	  margin-top: 10px;
	  color: #797D82;
	  font-size: 18px;
	  overflow: hidden;
	  text-indent: 30px;
	}
	
	
	.bottom{
		width:100%;
		height:450rpx;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	
	
	
</style>